<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/formedit.js"></script>
  </head>
  
  <body onload="loadCallClass()">
    <div class="x-body">
        <form id="fm" class="layui-form">
          <input type="hidden" name="id"/>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>医馆
              </label>
              <div class="layui-input-inline">
                  <select name="hospitalid" lay-verify="" id="hospitalid">
                  </select>
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">
                  <span class="x-red">*</span>医生
              </label>
              <div class="layui-input-inline">
                  <select id="doctorid" name="doctorid" lay-verify="">
                  </select>
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>值班日期
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="dutyDate" name="dutyDate" required="" lay-verify="dutyDate"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>开始时间
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="dutyStartTime" name="dutyStartTime" required="" lay-verify="dutyStartTime"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>结束时间
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="dutyEndTime" name="dutyEndTime" required="" lay-verify="dutyEndTime"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">保存</button>
          </div>
      </form>
    </div>
    <script type="text/javascript">
        $()
    </script>
    
    
    <script>
      layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
        ,layer = layui.layer;
      
        //监听提交
        form.on('submit(add)', function(data){
        	  var formData=JSON.stringify(data.field);
	          console.log(formData);
	          //发异步，把数据提交给后台
	          $.ajax({
	          	type:"post",
	          	url:"/duty/insert",
	          	data:data.field,
       			//contentType: "application/json;charset=utf-8",
       			dataType: "json",//预期服务器返回的数据类型
       			async:false,
       			success:function(result){
       				console.log(result);//打印服务端返回的数据
       				layer.alert("保存成功", {icon: 6},function () {
	                // 获得frame索引
	                var index = parent.layer.getFrameIndex(window.name);
	                //关闭当前frame
	                parent.layer.close(index);
	                //刷新父页面表格
	                parent.layui.table.reload('idTest',{page: {curr: 1}});//idTest是表格的id；
          		});
       			},
       			error:function(){
       				layer.alert("保存失败", {icon: 5});
       			}
	          });
	          return false;
	        });
      });
      
      
      function loadCallClass(){
          /**请求所有的医馆信息*/
          $.post("/hospitals/search",function(res){
              for(let i=0;i<res.rows.length;i++){
                $("#hospitalid").append(`<option value="${res.rows[i].id}">${res.rows[i].hname}</option>`);
	            layui.use(['layer', 'form'], function(){
	                  var layer = layui.layer
	                  ,form = layui.form;
	                  form.render('select');
	            });
              }
          })
          /**请求所有的医生信息*/
          $.post("/doctors/search",function(res){
              for(let i=0;i<res.rows.length;i++){
                $("#doctorid").append(`<option value="${res.rows[i].id}">${res.rows[i].doctorname}</option>`);
                layui.use(['layer', 'form'], function(){
                    var layer = layui.layer
                    ,form = layui.form;
                    form.render('select');
                });
              }
          })
      }
      
      /**配置日期插件*/
      layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
          elem: '#dutyDate',
          format:'yyyy-MM-dd',
          done: function(value, date, endDate){
        	    console.log(value); //得到日期生成的值，如：2017-08-18
        	    $("#dutyStartTime").val(value+" 00:00");
        	    $("#dutyEndTime").val(value+" 00:00");
           }
        });
        //执行一个laydate实例
        laydate.render({
          elem: '#dutyStartTime',
          type: 'time',
          format:'yyyy-MM-dd HH:mm'
        });
        //执行一个laydate实例
        laydate.render({
          elem: '#dutyEndTime',
          type: 'time',
          format:'yyyy-MM-dd HH:mm'
        });
      });
  </script>
  </body>

</html>